<template>
  <div id="safeword">
       <section class="order-main-header">
            <mt-header title="修改资金密码">
            <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
            </mt-header>
        </section>
      <div class="form-format">
          <div class="val-input" v-if="hasSafe">
              <span class="val-t">旧密码：</span>
              <input type="password" v-model="formData.oldPassword" >
          </div>
          <div class="val-input">
              <span class="val-t">新密码：</span>
              <input type="password" v-model="formData.pwd" >
          </div>
          <p v-show="pwdFormatErr" class="pwd-format-tip">密码至少包括一种类型，长度为8-32位</p>
          <div class="val-input">
              <span class="val-t">重新输入：</span>
              <input type="password" v-model="formData.rePwd">
          </div>
          <p v-if="rePwdFormatErr" class="pwd-format-tip">两次输入的密码不一致</p>
          <div class="val-input">
            <span class="left-key val-t">{{sessionData}}：</span>
            <input type="text" class="input-code" v-model="formData.code">
            <span class="codeBtn" @click="sendCode" :style="btnColor">{{sendCodeText}}</span>
          </div>
          <button class='addBtn' :disabled="btnOff" :class="!btnOff?'active':'no-active'" @click="sure()">{{btnText}}</button>
      </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';//导入toast组件
     import {getLang} from '../../components/util/language/cn';
export default {
    data () {
        return {
            formData:{
                oldPassword:'',
                pwd:'',
                rePwd:'',
                code:''
            },
            btnText:'确认修改',
            sendCodeText:'发送',
            btnColor:'color:#3381ff',
            codeType:'',
            sessionData:""
        }
    },
    mounted() {
        this.$http.post('v1/session?'+ new Date().getTime(),).then((res)=>{
            if(res.data.data.loginName.search("@")>-1){
                 this.sessionData="邮箱验证码";
            }else{
                 this.sessionData="短信验证码";
            }
        })
    },
    computed:{
        btnOff: function () {
            return this.hasSafe? !this.formData.pwd || !this.formData.rePwd || !this.formData.code || !this.formData.oldPassword : !this.formData.pwd || !this.formData.rePwd || !this.formData.code;
        },
        pwdFormatErr: function() {
            return !/^\S{8,32}$/.test(this.formData.pwd)
        },
        rePwdFormatErr: function() {
            return this.formData.rePwd && (this.formData.rePwd != this.formData.pwd)
        }
    },
    methods: {
           isEmail(b) {
        return /^[A-Za-z0-9\u4e00-\u9fa5_]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(b)
         },
        sendCode() {
            if(!isNaN(this.sendCodeText)){
                    return ;
                }
            this.$http.post('/v1/account/sendCode').then(res=>{
                res = res.data
                if(res.code == 200){
                    this.sendCodeText = 60
                    this.btnColor = 'color:#ddd'
                    var timeId = setInterval(function(){
                        this.sendCodeText--
                        if(this.sendCodeText == 0){
                            clearInterval(timeId)
                            this.btnColor = 'color:#3381ff'
                            this.sendCodeText = '发送'
                        }
                    }.bind(this),1000)
                }
            }).catch(err=>{

            })
        },
        sure(){
            let formData = {
                pwd:this.formData.pwd,
                code:this.formData.code,
                type:0
            }
            let lang=getLang;
            if(this.hasSafe){
                formData.oldPassword = this.formData.oldPassword
                formData.type = 1
            }
            if(!/^\S{8,32}$/.test(this.formData.pwd)){
                Toast("密码至少包括一种类型，长度为8-32位");
                return;
            }
            this.$http.post('/v1/account/modSafeWord',formData).then(res=>{
              let  data = res.data;
                if (data.code == 1) {
                Toast(lang.js.account.safewordSame);
            } else if (data.code == 200) {
                this.hasSafe? Toast('修改成功'): Toast('设置成功')
                    this.$router.push('/safeCenter')
            } else if (data.code == 100) {
                Toast(lang.codeNotSendTips);
            } else if (data.code == 101) {
                Toast(lang.codeFrequentTips);
            } else if (data.code == 102) {
                Toast(lang.codeErrorTips + data.data);
            } else if (data.code == 105) {
                Toast(lang.codeNOAgreement);
            } else if (data.code == 2) {
                Toast(lang.codeZJAgreement);
            } else if (data.code == 107) {
                Toast(lang.js.account.oldSafewordWrong);
            } else {
                Toast(lang.error);
            }
            }).catch(err=>{
            })
        },
         handleClose(){
                this.$router.go(-1);
            },
    },
    props: [
        'hasSafe'
    ],
}
</script>

<style lang="less" scoped>
  .mint-header{
    height: 100px;
    font-size: 32px;
    background-color: #161736;
    color: #E0E0F9
}
    #otcPayment{
        font-family:PingFang SC;
        font-weight:500;
    }
    .user-top {
        height: 110px;
        line-height: 110px;
        padding: 0 60px;
        border-bottom: 1px solid #222240;
    }
    .form-format{
        padding: 0 30px;
        .val-input{
            height: 93px;
            line-height: 93px;
            border-bottom: 1px solid #222240;
            display: flex;
            .val-t{
                width: 200px;
                font-size: 28px;
                color:#8686C0;
            }
            input{
                line-height: 93px;
                border:none;
                background:none;  
                outline:none;  
                font-size: 30px;
                padding-left: 20px;
                color:#8686C0;
            }
            .input-code{
                flex: 1;
            }
            .codeBtn{
                width: 58px;
                text-align: center;
                font-size: 24px;
            }
            input:focus{   
                border:none;
            }
        }
        .addBtn{
            display: block;
            width: 426px;
            height: 58px;
            line-height: 58px;
            font-size: 30px;
            color: #ffffff;
            text-align: center;
            margin:143px auto;
            margin-bottom: 0;
            height:86px;
            background:rgba(51,129,255,1);
            border-radius:10px;
        }
        .addBtn.active{
            background-color: #3381ff;
        }
        .pwd-format-tip{
            color:#FF8080;
            font-size: 20px;
            margin-top: 5px;
        }
    }
     .load .active{
            background-color: #3381ff;
            color: #ffffff;
        }
        .load  .no-active{
            color: #161736;
            background-color: #f6f6f6;
        }
</style>